import type { UnwrapRef } from "vue";
import type { DesktopInterface } from "@/typings/desktop";
import { contextmenuList } from "@/constants/common";

export function DesktopContextMenu(props: { top: UnwrapRef<number>; left: UnwrapRef<number> }): JSX.Element {
  const contextmenuArr = ref<DesktopInterface.ContextMenu[]>(contextmenuList);
  const getStyle = () => {
    return { top: `${props.top}px`, left: `${props.left}px` };
  };

  return (
    <main
      style={getStyle()}
      class="context-menu min-w-[180px] absolute bg-white/90 rounded-[5px] shadow-[0_0_10px_rgb(0,0,0,0.3)] text-14px text-left overflow-hidden p-[2px_0px] z-10"
    >
      {contextmenuArr.value.map(item => {
        return item.type ? (
          <hr class="border-t border-solid border-t-[#dddddd] w-[85%] m-auto" />
        ) : (
          <div
            onClick={e => {
              item.callback && item.callback(e);
            }}
            v-text={item.title}
          ></div>
        );
      })}
    </main>
  );
}
